import { useEffect, useState, useRef } from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { Button, Popover, Badge, App, Skeleton, Empty, List } from 'antd';
import { MailOutlined } from '@ant-design/icons';
import { useNavigate } from 'react-router-dom';
import dayjs from 'dayjs';

import { MESSAGE  } from '@/config/url';
import { RELOAD_HEADER_MSG, EE } from '@/utils/emitter';

import styles from './index.module.scss';

export default props => {
    const initState = () => ({
        open: false,
        msgList: [],
        loading: false,
    });
    const [state, setState] = useState(initState);
    const { message } = App.useApp();
    const { userInfo={} } = useSelector(s => s.common || {});
    const dispatch = useDispatch();
    const navigate = useNavigate();
    const SIDE = {};

    // 标记已读
    const read = (item) => {
        let msgList = state.msgList.slice(0);

        const index = msgList.findIndex(i => i.id === item.id);
        if(-1 === index) return message.warning(`无效消息`);
    };
    const toDetail = item => {
        const href = SIDE[item.notificationType]?.href || '';
        if(!href || !item.bizId) return;

        const url = href.replace('{id}', item.bizId);

        read(item);
        location.href = url;
        setState(o => ({...o, open: false}));
    };
    // 消息
    const toNotify = () => {
        setState(o => ({...o, open: false}));
        navigate(MESSAGE);
    };
    // 显示/隐藏
    const onOpenChange = open => {
        setState(o => ({...o, open}));
    };
    // 弹框内容
    const popoverContent = () => {
        return (
            <div className={styles['popover-body']}>
                <div className={styles['list']}>
                    <List
                        loading={state.loading}
                        dataSource={state.msgList.slice(0, 4)}
                        renderItem={item => {
                            return (
                                <List.Item>
                                    <div className={styles['item']} onClick={toDetail.bind(null, item)}>
                                        <p>{item.content||'--'}</p>
                                        <div>{item.createTime ? dayjs(item.createTime).format('YYYY年MM月DD HH:mm:ss') : '--'}</div>
                                    </div>
                                </List.Item>
                            );
                        }}
                    />
                </div>
                <div className={styles['footer']}>
                    <div className={styles['msgs']} onClick={toNotify}>查看更多</div>
                </div>
            </div>
        );
    };

    const getList = () => {
        setState(o => ({...o, loading: true}));
    };

    useEffect(() => {
        if(userInfo?.id) getList();
    }, [userInfo]);
    useEffect(() => {
        EE.on(RELOAD_HEADER_MSG, getList);

        return () => {
            EE.off(RELOAD_HEADER_MSG);
        }
    }, []);

    return (
        <Popover
            content={popoverContent()}
            title={null}
            trigger={['click']}
            open={state.open}
            onOpenChange={onOpenChange}
            rootClassName={styles['popover-container']}
            arrow={false}
            placement='bottomRight'
        >
            <Badge count={state.msgList?.length||0} size="small" overflowCount={10}>
                <div className={styles['email']}>
                    <Button variant="filled" color="default" shape="circle" icon={<MailOutlined/>}></Button>
                </div>
            </Badge>
        </Popover>
    )
}
